<template>
  <div id="map" style="width:100%; height: 100%;">
    <div class="map-handle">
      <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }" size="small">
        <a-form-item label="添加路线">
         <div style="display: flex;align-items: center">
           <a-input v-model="formData.name" placeholder="请输入路线名称"></a-input>
           <a-button size="small" type="primary" @click="createPolyline" style="margin-left: 10px" :disabled="!formData.name">添加</a-button>
           <a-button size="small" type="danger" @click="closePolyline" style="margin-left: 10px" :disabled="!currentPolyline.id">取消编辑</a-button>
         </div>
        </a-form-item>
        <a-form-item label="路线列表" style="margin-bottom: 0">
          <div style="text-align: left">
            <a-radio-group button-style="solid" v-model="currentPolyline.id" @change="onChangeLine">
              <a-radio-button :value="item.id" v-for="item in polylineList">
                {{ item.name }}
              </a-radio-button>
            </a-radio-group>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import icon_d from '@/assets/电机.png'
export default {
  name: 'MapEditor',
  data(){
    return {
      map: null,
      polyEditor: null,
      // TODO 航线列表
      polylineList: [],
      formData: {
        name: ''
      },
      currentPolyline: {
        id: undefined,
        name: ''
      }
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = new AMap.Map("map", {
        center: [116.400274, 39.905812],
        layers: [new AMap.TileLayer.Satellite()],
        zoom: 11
      });
      this.map = map
      // this.setDefaultPolyline()
      this.addMarker()
    },
    /**
     * TODO
     * 默认设置路线
     */
    setDefaultPolyline(){
      /**
       * 如果需要默认设置路线，可以设置path属性
       * @type {number[][]}
       */
      let path = [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
      ]
      let polyline1 = new AMap.Polyline({
        path: path,
        strokeColor: "red",
        strokeWeight: 6,
        strokeOpacity: 0.9,
        zIndex: 50,
        bubble: true,
      })
      this.map.add([polyline1])
      this.polylineList.push({
        id: 1,
        name: '路线1',
        polyline: polyline1
      })
      // 缩放地图到合适的视野级别
      this.map.setFitView()
      let polyEditor;

      polyEditor = new AMap.PolylineEditor(this.map, polyline1);
      this.polyEditoryAddEvent(polyEditor)
      polyEditor.setTarget(polyline1);
      polyEditor.open();
      this.currentPolyline = {
        name: '路线1',
        id: 1
      }
      this.polyEditor = polyEditor
    },
    polyEditoryAddEvent(polyEditor ) {
      let that = this
      polyEditor.on("addnode", function(event) {
        console.log("触发了添加节点事件");
      });
      polyEditor.on("adjust", function(event) {
        console.log("触发了调整节点事件");
      });
      polyEditor.on("removenode", function(event) {
        console.log("触发了删除节点事件");
      });
      polyEditor.on("end", function(event) {
        console.log("触发了编辑结束事件");
      });
      polyEditor.on("add", function(event) {
        console.log("触发了添加事件",event);
        that.currentPolyline.id = new Date().getTime()
        that.polylineList.push({
          id: that.currentPolyline.id,
          name: that.currentPolyline.name,
          polyline: event.target
        })
      });
    },
    createPolyline(){
      if (!this.formData.name) {
        this.$message.error('请输入路线名称')
        return
      }
      if (this.polylineList.find(item => item.name === this.formData.name)) {
        this.$message.error('路线名称重复')
        return
      }
      this.$message.success('请在地图上选择点位点击')
      this.currentPolyline = {
        name: this.formData.name,
        id: undefined
      }
      if(!this.polyEditor) {
        this.polyEditor = new AMap.PolylineEditor(this.map)
        this.polyEditoryAddEvent(this.polyEditor)
      }
      this.polyEditor.setTarget();
      this.polyEditor.open();
      this.formData.name = ''
    },
    closePolyline(){
      this.polyEditor.close()
      this.currentPolyline = {
        id: undefined,
        name: ''
      }
    },
    // 切换路线
    onChangeLine(e){
      let value = e.target.value
      this.polyEditor.close()
      let currentPolyline = this.polylineList.find(item => item.id === value)
      this.currentPolyline = {
        name: value,
        id: currentPolyline.id
      }
      this.polyEditor.setTarget(currentPolyline.polyline)
      this.polyEditor.open()
    },
    addMarker(){
      // TODO 设备点位数据
      let poList = [
        {
          po: [116.405467, 39.907761],
          id: 1,
          address: '位置',
          // 电量
          power: 100,
          // 任务模式
          taskMode: 1,
        },
        {
          po: [116.305467, 39.907761],
          id: 2,
          address: '位置2',
          // 电量
          power: 100,
          // 任务模式
          taskMode: 1,
        },
        {
          po: [116.205467, 39.907761],
          id: 3,
          address: '位置3',
          // 电量
          power: 100,
          // 任务模式
          taskMode: 1,
        },
      ]
      let that = this
      for (let i = 0; i < poList.length; i++) {
        const item = poList[i]
        const marker = new AMap.Marker({
          map: this.map,
          icon: new AMap.Icon({
            image: icon_d,
            size: new AMap.Size(36,36),
            imageSize: new AMap.Size(36,36),
          }),
          position: item.po,
          extData: {
            ...item
          }
        });
        console.log('marker',marker)
        marker.on('click', function (e) {
          console.log(e)
          const extData = e.target._opts.extData
          const infoWindow = new AMap.InfoWindow({
            content: `
            <div style="padding-right: 50px">位置：${extData.address}</div>
            <div>电量：${extData.power}</div>
            <div>任务模式：${extData.taskMode}</div>

            `,
            anchor: 'bottom-center',
          });
          infoWindow.open(that.map, [e.lnglat.lng,e.lnglat.lat]);
        })
      }

    }
  },
};
</script>

<style>
#map {
  height: 100%;
  width: 100%;
  position: relative;
}
.map-handle {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(255,255,255,1);
  z-index: 999999;
  width: 100%;
  padding: 10px 0;
}
.map-handle .ant-form-item {
  margin-bottom: 0px;
}
.amap-icon img {
  position: initial !important;
}
</style>
